<template>
  <div>
    <div class="menu">
      <div class="menu-list">
        <div class="weidian" @click="switchTo('/')">
          <img class="menu-img" :src="'/' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页">
          <p class="menu-title" :class="{on: '/' === $route.path}">首页</p>
        </div>
        <div class="weidian" @click="switchTo('/type')">
          <img  class="menu-img" :src="'/type' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="分类">
          <p class="menu-title" :class="{on: '/type' === $route.path}">分类</p>
        </div>
        <div class="weidian weidian-menu" @click="switchTo('/shai')">
          <img  class="menu-img" :src="'/shai' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="晒一晒">
        </div>
        <div class="weidian" @click="switchTo('/cart')">
          <img class="menu-img" :src="'/cart' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="购物车">
          <p class="menu-title" :class="{on: '/cart' === $route.path}">购物车</p>
        </div>
        <div class="weidian" @click="switchTo('/user')">
          <img class="menu-img" :src="'/user' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="我的">
          <p class="menu-title" :class="{on: '/user' === $route.path}">我的</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PublicMenu',
  data () {
    return {
      tabBarImgArr: [{
        normal: '/static/icon/home.png',
        selected: '/static/icon/home_selected.png'
      }, {
        normal: '/static/icon/type.png',
        selected: '/static/icon/type_selected.png'
      }, {
        normal: '/static/icon/cart.png',
        selected: '/static/icon/cart_selected.png'
      }, {
        normal: '/static/icon/user.png',
        selected: '/static/icon/user_selected.png'
      }, {
        normal: '/static/icon/logo.png',
        selected: '/static/icon/logo_selected.png'
      }]
    }
  },
  methods: {
    switchTo (path) {
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
  .menu
    position: fixed;
    bottom: 0
    left: 0
    right: 0
    width: 100%
    height: .98rem
    background: #fff
    z-index: 50
    line-height: .48rem
    border-top: .02rem solid #eee
    box-shadow: 0 0 .2rem 0 rgba(155,143,143,0.6)
    padding: 0px;
    .menu-list
      margin: 0 auto
      width: 100%
      height: .98rem
      display: flex
      .weidian-menu
        display: flex;
      .weidian
        height: .98rem
        text-align: center
        align-items: center
        justify-content: center
        float: none
        flex: 1
        .menu-img
          width: .64rem
          height: .64rem
          margin: 0 auto
          vertical-align: middle
          border: none
        .menu-title
          font-size: .2rem
          color: #000
          margin: 0
          line-height: .28rem
          overflow: hidden
          width:100%
        .on
          color: $colorMain
</style>
